<template>
    <!-- pages/nameList/nameList.wxml -->
    <view class="page">
		<cu-custom bgColor="bg-gray" :isBack="true">
			<block slot="content">名单库</block>
		</cu-custom>
        <view class="block_3">
            <view class="title flex align-center justify-between">
                <text lines="1" class="text_4">共{{ total }}位</text>
				<view class="flex align-center" style="width: 60%;">
					<view @tap="navTo('/pages/nameList/labelManage')" class="button_1">
						<image src="../../static/bq.png" mode=""></image>
					    <text lines="1" class="text-group_1">标签</text>
					</view>
					<view @tap="onClick" class="button_1">
						<image src="../../static/import.png" mode=""></image>
					    <text lines="1" class="text-group_1">导出</text>
					</view>
					<view @tap="deleteUser" class="button_1">
					    <image src="../../static/lj.png" mode=""></image>
						<text lines="1" class="text-group_1">删除</text>
					</view>
				</view>
            </view>
            <view class="shaixuan">
                <view class="list_5">
                    <view class="dropdown_1-0">
                        <picker class="text_5-1" mode="date" :value="query.date" @change="bindDateChange">
                            <input :value="query.date" type="text" class="text_7" placeholder="选择日期" />
                            <icon class="delicon" @tap="clearDate" type="clear"></icon>
                        </picker>
                        <view class="icon_10-0"></view>
                    </view>
                </view>
                <view class="group_10">
                    <view class="section_7">
                        <picker class="text_6" @change="bindLabelChange" :value="labelIndex" :range="labels" range-key="name">
                            <input :value="query.labelName" type="text" class="text_7" placeholder="标签" />
                        </picker>
                        <view class="box_7"></view>
                    </view>
                    <view class="input_1">
                        <text lines="1"></text>
                        <input type="text" class="text_7" placeholder="关键词" confirm-type="search" @confirm="search" />
                        <view class="icon_6"></view>
                    </view>
                </view>
            </view>
        </view>
        <view>
            <scroll-view
                style="height: 80%;"
                :scroll-y="true"
                @scrolltolower="bindDownLoad"
                @refresherrefresh="refresh"
                :refresher-enabled="true"
                :refresher-triggered="loading"
            >
                <view v-if="dataList.length > 0" class="namelist">
                    <view class="item" v-for="(item, index) in dataList" :key="index">
                        <view class="namelist_l">
                            <checkbox :data-id="item.id" @tap="checked" role="radio"></checkbox>
                            <text lines="1" class="namelistmark">{{ item.no }}</text>
                            <text lines="1" class="namelistmark" :data-id="item.id" @tap="navigateUserInfo">{{ item.name }}</text>
                            <text lines="1" class="namelistmark" :data-id="item.id" @tap="navigateUserInfo">{{ item.mobile }}</text>
                            <text lines="1" class="namelistmark">{{ item.label }}</text>
                            <text lines="1" class="namelistmark">{{ item.remark }}</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <!-- 加载时文字 -->
            <view class="bomTxt">
                <view v-if="loading">正在加载...</view>
                <view v-if="loaded">已加载全部</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/nameList/nameList.js
import api from '../../utils/api';
var app = getApp();
export default {
    components: {},
    data() {
        return {
            dataList: [],
            page: 0,
            total: 0,
            isEnd: false,
            loading: false,
            loaded: false,
            selectList: [],
            labels: [],
            labelIndex: 0,
            query: {
                date: '',
                labelId: '',
                labelName: '',
                title: ''
            },
            scrollHeight: 0
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.queryLabels();
        this.loadData();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        var that = this;
        var arr = ['.block_3', '.bomTxt'];

    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        bindDateChange(e) {
            var key = 'query.date';
            this[key] = e.detail.value;
            this.search();
        },

        bindLabelChange(e) {
            var keyId = 'query.labelId';
            var keyName = 'query.labelName';
            var labelIndex = e.detail.value;
            var label = this.labels[labelIndex];
            this[keyName] = label.name;
            this[keyId] = label.id;
            this.labelIndex = labelIndex;
            this.search();
        },
		navTo(url) {
			uni.navigateTo({
				url: url
			})		
		},
        search() {
            this.page =  0;
            this.dataList = [];
            this.isEnd = false;
            this.loadData();
        },

        queryLabels() {
            var that = this;
            api.get('/rest/api/queryMyLabel', {
                page: 1,
                pageSize: 1000
            }).then((res) => {
                console.log(res);
                var labels = [
                    {
                        id: '',
                        name: '全部标签'
                    }
                ];
				this.labels = labels.concat(res.data)
            });
        },

        clearDate() {
            var key = 'query.date';
            this[key] = '';
        },

        navigator(e) {
            let url = e.currentTarget.dataset['url'];
            uni.navigateTo({
                url: url
            });
        },

        navigateUserInfo(e) {
            let userId = e.currentTarget.dataset['id'];
            uni.navigateTo({
                url: '/pages/userInfo/userInfo?id=' + userId
            });
        },

        loadData() {
            let that = this;
            var page = that.page + 1;
            var params = {
                page: page
            };
            var query = this.query;

            if (query.date != '') {
                params['date'] = query.date;
            }

            if (query.labelId != '') {
                params['labelId'] = query.labelId;
            }

            if (query.title != '') {
                params['title'] = query.title;
            }

            api.get('/rest/api/queryFriendList', params)
                .then((res) => {
                    if (res.data.list.length != 0) {
						that.dataList = that.dataList.concat(res.data.list);
						that.page = page;
						that.total = res.data.total;
                    } else {
						that.isEnd = true;
						that.total = res.data.total
                    }

                    var tips = '刷新成功';

                    if (page > 1) {
                        tips = '加载成功';
                    }

                    app.globalData.successTip(tips);
                    that.loading = true;
                    that.loaded = false
                })
                .catch((err) => {
					that.loaded = true;
					that.loading = false
                });
        },

        //下拉刷新
        refresh: function (event) {
			this.page = 0;
			this.dataList = [];
			this.isEnd = false;

            if (!this.loading) {
				this.loading = true;
				this.loaded = false
            }

            this.loadData();
        },

        //下拉加载
        bindDownLoad: function () {
            let that = this;

            if (this.isEnd == true) {
                console.log('isEnd');
                return;
            }

            if (!that.loading) {
                this.loading = true;
                this.loaded = false
            }

            setTimeout(function () {
                that.loadData();
            }, 1000);
        },

        deleteUser() {
            if (this.selectList.length == 0) {
                this.$api.msg('未选中数据');
                return;
            }

            var that = this;
            uni.showModal({
                title: '删除提示',
                content: '确认要删除选中的 ' + that.selectList.length + ' 条数据？',

                success(res) {
                    if (res.confirm) {
                        api.post('/rest/api/delFriend', {
                            ids: that.selectList.join(',')
                        }).then((res) => {
                            let dataList = that.dataList.filter((item) => {
                                return !that.selectList.includes(item.id);
                            });
							that.dataList = dataList
                            app.globalData.successTip('删除成功');
                        });
                    }
                }
            });
        },

        checked(e) {
            let id = e.currentTarget.dataset['id'];
            let selectList = this.selectList;
            var index = selectList.indexOf(id);

            if (index > -1) {
                selectList.splice(index, 1);
            } else {
                selectList = selectList.concat(id);
            }
			this.selectList = selectList
        },

        onClick() {
            console.log('占位：函数 onClick 未声明');
        }
    }
};
</script>
<style lang="scss">
/* pages/nameList/nameList.wxss */
.page {
    background-color: rgba(242, 242, 242, 1);
    position: fixed;
    width: 750rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.block_3 {
    padding: 30rpx;
}

.dropdown_1-0 {
    position: relative;
}

.delicon {
    position: absolute;
    right: 10rpx;
    top: 6rpx;
}

.group_8 {
    flex-direction: row;
    display: flex;
    margin: 0 10rpx 0 12rpx;
}

.section_9 {
    width: 34rpx;
    height: 20rpx;

    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 6rpx 0 8rpx 0;
}

.text_15 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: center;
    white-space: nowrap;
    line-height: 34rpx;
    margin-left: 16rpx;
}

.section_10 {
    width: 12rpx;
    height: 20rpx;

    background-size: 14rpx 24rpx;
    display: flex;
    flex-direction: column;
    margin: 6rpx 0 8rpx 444rpx;
}

.text_16 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 34rpx;
    margin-left: 10rpx;
}

.section_11 {
    width: 54rpx;
    height: 24rpx;

    background-size: 54rpx 26rpx;
    display: flex;
    flex-direction: column;
    margin: 4rpx 0 6rpx 6rpx;
}

.nav-bar_3 {
    background-color: rgba(242, 242, 242, 1);
    margin-top: 8rpx;
    flex-direction: row;
    display: flex;
    padding: 20rpx 16rpx 20rpx 32rpx;
}

.icon_9 {
    width: 16rpx;
    height: 32rpx;

    background-size: 20rpx 32rpx;
    display: flex;
    flex-direction: column;
    margin: 16rpx 0 12rpx 0;
}

.text_17 {
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 34rpx;
    font-family: PingFangSC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 48rpx;
    margin: 6rpx 0 0 260rpx;
}

.applet-top-bar_3 {
    width: 182rpx;
    height: 60rpx;

    background-size: 100% 100%;
    margin-left: 142rpx;
    display: flex;
    flex-direction: column;
}

.title {
    margin: 0rpx 0rpx 0 0rpx;
	height: 50upx;
}

.text_4 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin-top: 12rpx;
}

.button_1 {
    width: 140upx;
    height: 60upx;
    background: #FFFFFF;
	margin-right: 20upx;
    border-radius: 30upx;
    font-size: 28rpx !important;
    display: flex;
	align-items: center;
	justify-content: center;
	image{
		width: 26upx;
		height: 26upx;
		margin-right: 6upx;
	}
}

.image-text_9 {
    width: 92rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.icon_2 {
    width: 26rpx;
    height: 26rpx;

    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 8rpx 0 6rpx 0;
}

.text-group_1 {
    overflow-wrap: break-word;
    color: rgba(26, 117, 255, 1);
    font-size: 28rpx !important;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 46rpx;
}

.button_2 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 30rpx;
    margin-left: 16rpx;
    display: flex;
    flex-direction: column;
    padding: 8rpx 22rpx 8rpx 22rpx;
}

.image-text_10 {
    width: 92rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.icon_3 {
    width: 24rpx;
    height: 24rpx;

    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 8rpx 0 8rpx 0;
}

.text-group_2 {
    overflow-wrap: break-word;
    color: rgba(26, 117, 255, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.button_3 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 30rpx;
    margin-left: 16rpx;
    display: flex;
    flex-direction: column;
    padding: 8rpx 22rpx 8rpx 22rpx;
}

.image-text_11 {
    width: 92rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.icon_4 {
    width: 26rpx;
    height: 24rpx;

    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 8rpx 0 8rpx 0;
}

.text-group_3 {
    overflow-wrap: break-word;
    color: rgba(26, 117, 255, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.list_5 {
    width: 100%;
    height: 60rpx;
    align-self: center;
    margin-top: 20rpx;
}

.dropdown_1-0 {
	width: 100%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20rpx;
    margin: 20rpx 0;
    justify-content: space-between;
    padding: 10rpx 24rpx 10rpx 32rpx;
    overflow: hidden;
    height: 65rpx;
}

.text_5-0 {
    width: 168rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.icon_10-0 {
    width: 26rpx;
    height: 24rpx;

    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 8rpx 0 8rpx 0;
}

.dropdown_1-1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20rpx;
    width: 686rpx;
    margin-bottom: 20rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    padding: 10rpx 24rpx 10rpx 32rpx;
}

.text_5-1 {
    width: 168rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.icon_10-1 {
    width: 26rpx;
    height: 24rpx;

    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 8rpx 0 8rpx 0;
}

.group_10 {
    width: 686rpx;
    align-self: center;
    margin-top: 20rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.section_7 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20rpx;
    width: 332rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    padding: 10rpx 16rpx 10rpx 32rpx;
}

.text_6 {
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.box_7 {
    width: 26rpx;
    height: 24rpx;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 8rpx 0 8rpx 0;
}

.input_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10rpx;
    width: 48%;
    padding: 10rpx 24rpx 10rpx 32rpx;
    float: left;
    height: 65rpx;
    margin-left: 2%;
}

.text_7 {
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.icon_6 {
    width: 22rpx;
    height: 22rpx;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 10rpx 0 8rpx 0;
}

.namelist {
    margin: 0rpx;
    margin-top: 20rpx;
    padding: 10rpx;
    border-radius: 20rpx !important;
    background-color: #fff;
    overflow: hidden;
}

.namelist_l {
    background-color: transparent;
    padding: 20rpx;
    overflow: hidden;
}

.namelist_l radio {
    float: left;
    width: 40rpx;
    height: 40rpx;
}

.image-text_12-0 {
    display: inline-block;
}

.group_12-0 {
    display: inline-block;
}

.namelistmark {
    display: inline-block;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    display: inline-block;
    line-height: 40rpx;
    padding-right: 20rpx;
}

.list-items_1-1 {
    background-color: rgba(255, 255, 255, 1);
    width: 686rpx;
    height: 80rpx;
    flex-direction: row;
    display: flex;
    padding: 20rpx 88rpx 20rpx 16rpx;
}

.image-text_12-1 {
    width: 104rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.group_12-1 {
    width: 40rpx;
    height: 40rpx;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
}

.text-group_4-1 {
    width: 62rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_8-1 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-left: 28rpx;
}

.text_9-1 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-left: 26rpx;
}

.text_11-1 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-left: 28rpx;
}

.list-items_1-2 {
    background-color: rgba(255, 255, 255, 1);
    width: 686rpx;
    height: 80rpx;
    flex-direction: row;
    display: flex;
    padding: 20rpx 88rpx 20rpx 16rpx;
}

.image-text_12-2 {
    width: 104rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.group_12-2 {
    width: 40rpx;
    height: 40rpx;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
}

.text-group_4-2 {
    width: 62rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_8-2 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-left: 28rpx;
}

.text_9-2 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-left: 26rpx;
}

.list-items_1-3 {
    background-color: rgba(255, 255, 255, 1);
    width: 686rpx;
    height: 80rpx;
    flex-direction: row;
    display: flex;
    padding: 20rpx 88rpx 20rpx 16rpx;
}

.image-text_12-3 {
    width: 104rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.group_12-3 {
    width: 40rpx;
    height: 40rpx;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
}

.text-group_4-3 {
    width: 62rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_8-3 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-left: 28rpx;
}

.text_9-3 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-left: 26rpx;
}

.list-items_1-4 {
    background-color: rgba(255, 255, 255, 1);
    width: 686rpx;
    height: 80rpx;
    flex-direction: row;
    display: flex;
    padding: 20rpx 88rpx 20rpx 16rpx;
}

.image-text_12-4 {
    width: 104rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.group_12-4 {
    width: 40rpx;
    height: 40rpx;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
}

.text-group_4-4 {
    width: 62rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_8-4 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-left: 28rpx;
}

.text_9-4 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-left: 26rpx;
}

.list-items_1-5 {
    background-color: rgba(255, 255, 255, 1);
    width: 686rpx;
    height: 80rpx;
    flex-direction: row;
    display: flex;
    padding: 20rpx 88rpx 20rpx 16rpx;
}

.image-text_12-5 {
    width: 104rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.group_12-5 {
    width: 40rpx;
    height: 40rpx;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
}

.text-group_4-5 {
    width: 62rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}

.text_8-5 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-left: 28rpx;
}

.text_9-5 {
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-left: 26rpx;
}

radio .wx-radio-input {
    border-radius: 50%;
    width: 28rpx;
    height: 28rpx;
}

radio .wx-radio-input {
    border-color: #c8c7ca;
}

radio .wx-radio-input.wx-radio-input-checked {
    border-color: #0073ff !important;
    background: white !important;
}

radio .wx-radio-input.wx-radio-input-checked::before {
    border-radius: 50%;
    width: 24rpx;
    height: 24rpx;
    content: '';
    background-color: #0073ff;
}

.bomTxt {
    display: flex;
    justify-content: center;
    font-size: 12px;
    color: rgb(126, 138, 155);
    padding: 0rpx 0rpx 20rpx 0rpx;
}
</style>
